<template>
    <div class="sign-in-config-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <h2>签到赠送积分</h2>
        </div>

        <!-- 配置表单 -->
        <div class="form-content">
            <el-card shadow="never" class="form-card">
                <el-form
                    ref="signInFormRef"
                    :model="formData"
                    :rules="formRules"
                    label-width="120px"
                    class="sign-in-form"
                >
                    <!-- 第1天 -->
                    <el-form-item label="第1天:" prop="day1Points">
                        <el-input-number
                            v-model="formData.day1Points"
                            :min="1"
                            :max="10"
                            placeholder="输入积分"
                            style="width: 200px"
                        />
                    </el-form-item>

                    <!-- 第2天 -->
                    <el-form-item label="第2天:" prop="day2Points">
                        <el-input-number
                            v-model="formData.day2Points"
                            :min="1"
                            :max="10"
                            placeholder="输入积分"
                            style="width: 200px"
                        />
                    </el-form-item>

                    <!-- 第3天 -->
                    <el-form-item label="第3天:" prop="day3Points">
                        <el-input-number
                            v-model="formData.day3Points"
                            :min="1"
                            :max="10"
                            placeholder="输入积分"
                            style="width: 200px"
                        />
                    </el-form-item>

                    <!-- 第4天 -->
                    <el-form-item label="第4天:" prop="day4Points">
                        <el-input-number
                            v-model="formData.day4Points"
                            :min="1"
                            :max="10"
                            placeholder="输入积分"
                            style="width: 200px"
                        />
                    </el-form-item>

                    <!-- 第5天 -->
                    <el-form-item label="第5天:" prop="day5Points">
                        <el-input-number
                            v-model="formData.day5Points"
                            :min="1"
                            :max="10"
                            placeholder="输入积分"
                            style="width: 200px"
                        />
                    </el-form-item>

                    <!-- 第6天 -->
                    <el-form-item label="第6天:" prop="day6Points">
                        <el-input-number
                            v-model="formData.day6Points"
                            :min="1"
                            :max="10"
                            placeholder="输入积分"
                            style="width: 200px"
                        />
                    </el-form-item>

                    <!-- 第7天 -->
                    <el-form-item label="第7天:" prop="day7Points">
                        <el-input-number
                            v-model="formData.day7Points"
                            :min="1"
                            :max="10"
                            placeholder="输入积分"
                            style="width: 200px"
                        />
                    </el-form-item>

                    <!-- 操作按钮 -->
                    <el-form-item>
                        <el-button type="primary" @click="handleSubmit">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus, Minus } from '@element-plus/icons-vue';
import { getSigninConfig, saveSigninConfig } from '@/api/system/signinConfig';

// 表单引用
const signInFormRef = ref();

// 表单数据
const formData = reactive({
    id: '',
    configName: '签到赠送积分配置',
    day1Points: 0,
    day2Points: 0,
    day3Points: 0,
    day4Points: 0,
    day5Points: 0,
    day6Points: 0,
    day7Points: 0,
    description: '每日签到奖励积分配置',
    isEnabled: 1
});

// 表单验证规则
const formRules = {
    day1Points: [
        { required: true, message: '请输入第1天积分', trigger: 'blur' },
        { type: 'number', min: 1, max: 10, message: '积分必须在1-10之间', trigger: 'blur' }
    ],
    day2Points: [
        { required: true, message: '请输入第2天积分', trigger: 'blur' },
        { type: 'number', min: 1, max: 10, message: '积分必须在1-10之间', trigger: 'blur' }
    ],
    day3Points: [
        { required: true, message: '请输入第3天积分', trigger: 'blur' },
        { type: 'number', min: 1, max: 10, message: '积分必须在1-10之间', trigger: 'blur' }
    ],
    day4Points: [
        { required: true, message: '请输入第4天积分', trigger: 'blur' },
        { type: 'number', min: 1, max: 10, message: '积分必须在1-10之间', trigger: 'blur' }
    ],
    day5Points: [
        { required: true, message: '请输入第5天积分', trigger: 'blur' },
        { type: 'number', min: 1, max: 10, message: '积分必须在1-10之间', trigger: 'blur' }
    ],
    day6Points: [
        { required: true, message: '请输入第6天积分', trigger: 'blur' },
        { type: 'number', min: 1, max: 10, message: '积分必须在1-10之间', trigger: 'blur' }
    ],
    day7Points: [
        { required: true, message: '请输入第7天积分', trigger: 'blur' },
        { type: 'number', min: 1, max: 10, message: '积分必须在1-10之间', trigger: 'blur' }
    ]
};

// 添加天数
const addDay = () => {
    ElMessage.info('添加天数功能待实现');
    // 这里可以实现动态添加更多天数的逻辑
};

// 删除天数
const removeDay = (day: number) => {
    ElMessage.info(`删除第${day}天配置`);
    // 这里可以实现删除指定天数配置的逻辑
    const fieldName = `day${day}Points` as keyof typeof formData;
    (formData[fieldName] as number) = 0;
};

// 提交表单
const handleSubmit = async () => {
    try {
        await signInFormRef.value.validate();
        
        // 准备提交数据
        const submitData = {
            id: formData.id,
            configName: formData.configName,
            day1Points: formData.day1Points,
            day2Points: formData.day2Points,
            day3Points: formData.day3Points,
            day4Points: formData.day4Points,
            day5Points: formData.day5Points,
            day6Points: formData.day6Points,
            day7Points: formData.day7Points,
            description: formData.description,
            isEnabled: formData.isEnabled
        };
        
        await saveSigninConfig(submitData);
        ElMessage.success('签到配置保存成功');
        
        // 重新加载配置数据
        await loadSignInConfig();
    } catch (error) {
        console.error('保存签到配置失败:', error);
        ElMessage.error('保存签到配置失败，请检查表单内容');
    }
};

// 页面初始化
onMounted(() => {
    // 可以在这里加载现有的签到配置数据
    loadSignInConfig();
});

// 加载签到配置
const loadSignInConfig = async () => {
    try {
        const response = await getSigninConfig();
        if (response.data) {
            const data = response.data;
            formData.id = data.id;
            formData.configName = data.configName;
            formData.day1Points = data.day1Points;
            formData.day2Points = data.day2Points;
            formData.day3Points = data.day3Points;
            formData.day4Points = data.day4Points;
            formData.day5Points = data.day5Points;
            formData.day6Points = data.day6Points;
            formData.day7Points = data.day7Points;
            formData.description = data.description;
            formData.isEnabled = data.isEnabled;
        }
    } catch (error) {
        console.error('加载签到配置失败:', error);
        ElMessage.error('加载签到配置失败');
    }
};
</script>

<style scoped>
.sign-in-config-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

/* 页面头部 */
.page-header {
    margin-bottom: 20px;
    text-align: center;
}

.page-header h2 {
    margin: 0;
    color: #303133;
    font-size: 24px;
    font-weight: 600;
}

/* 表单内容 */
.form-content {
    max-width: 600px;
    margin: 0 auto;
}

.form-card {
    border-radius: 8px;
}

.sign-in-form {
    padding: 20px;
}

/* 输入组样式 */
.input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.button-group {
    display: flex;
    gap: 5px;
}

/* 表单提示 */
.form-hint {
    color: #f56c6c;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 8px;
}

/* 表单项样式 */
:deep(.el-form-item__label) {
    font-weight: 600;
    color: #303133;
}

:deep(.el-form-item__label::before) {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
}

/* 按钮样式 */
:deep(.el-button--small.is-circle) {
    width: 24px;
    height: 24px;
    padding: 0;
}

:deep(.el-button--small.is-circle .el-icon) {
    font-size: 12px;
}

/* 保存按钮样式 */
:deep(.el-button--primary) {
    background-color: #409eff;
    border-color: #409eff;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .sign-in-config-container {
        padding: 10px;
    }
    
    .form-content {
        max-width: 100%;
    }
    
    .sign-in-form {
        padding: 15px;
    }
    
    .input-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .input-group .el-input {
        width: 100% !important;
    }
    
    .button-group {
        align-self: flex-end;
    }
}
</style>
